<template>
	<view class="content wdh-100 columnbox">
		<view class="columnbox top-box">
			<view class="wdh-100 b-title">车辆绑定流程</view>
			<!-- <view class="wdh-100 b-title-t">操作步骤</view> -->
			<view class="rowbox wdh-100 jus">
				<view class="rowbox one-s-box">
					<view class="rowbox">1</view>
					输入正确车牌号
				</view>
				<view class="rowbox one-s-box">
					<view class="rowbox">2</view>
					输入车辆品牌信息
				</view>
				<view class="rowbox one-s-box">
					<view class="rowbox">3</view>
					输入车型
				</view>
				<view class="rowbox one-s-box">
					<view class="rowbox">4</view>
					确定
				</view>
			</view>
		</view>
		<view class="wdh-100 rowbox jus car-num">车牌号</view>
		<view class="columnbox n-box">
			<view class="rowbox wdh-100 spb car-num-list" @click="showKeyboard('xmKeyboard')">
				<view class="rowbox" v-for="(item,index) in 8" :key='index'>
					<view v-if="index==7" class="rowbox new-box">
						{{carnum.length<8?'新':carnum[7]}}
					</view>
					<view class="rowbox one-car-num car-num-input" v-else-if="index<carnum.length">
						{{carnum[index]}}
					</view>
					<view class="rowbox one-car-num" v-else>
					</view>
					<view v-if="index==1" class="car-num-dot"></view>
				</view>
			</view>
			<view class="rowbox wdh-100 scan-box">
				<u-icon style="margin-right: 10rpx;" name="scan" color="#126BC9" size="40rpx"></u-icon>
				<view>扫一扫识别车牌号</view>
			</view>
		</view>
		<view class="wdh-100 rowbox jus car-num" style="margin-top: 36rpx;">车辆信息</view>
		<view class="columnbox n-box">
			<view class="wdh-100 rowbox spb">
				<view class=" info-title">车辆品牌</view>
				<input v-model="brand" placeholder="请输入" class="input-box" />
			</view>
			<view class="wdh-100 rowbox spb" style="margin-top: 24rpx;">
				<view class=" info-title">车型</view>
				<input v-model="carmodel" placeholder="请输入" class="input-box" />
			</view>
		</view>
		<xm-cell style="opacity: 0;" special label="" :value="value" @show=""></xm-cell>
		<xm-keyboard-v2 ref="xmKeyboard" @change='changeValue' @confirm="(v) => value = v"></xm-keyboard-v2>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box">
			<view class="rowbox pay-btn" @click="submitInfo">确定绑定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				carnum: [],
				submitflag: false,
				brand: '',
				carmodel: ''
			};
		},
		methods: {
			submitInfo() {
				
				if (this.carnum.length < 7) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return false
				}
				if(this.brand==''){
					uni.showToast({
						title: '请输入车辆品牌',
						icon: 'none'
					})
					return false
				}
				if(this.carmodel==''){
					uni.showToast({
						title: '请输入车型',
						icon: 'none'
					})
					return false
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '正在保存'
					})
					this.$req.post('/xcx/userCars', {
						licensePlate: this.carnum.join(''),
						brand: this.brand,
						model: this.carmodel
					}).then(res => {
						uni.hideLoading()
						this.submitflag = false
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 200) {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length -
								1]; //当前页页面实例
							let prevPage = pages[pages.length -
								2]; //上一页页面实例
							prevPage.$vm.refreshflag = true
							uni.navigateBack()
						}
					})
				}
			},
			changeValue(e) {
				this.carnum = e.split('')
			},
			showKeyboard(ref) {
				this.$refs[ref].toShow(this.value)
			},
			toShow(key) {
				this['show' + (key ^ 3)] = false;
				this['show' + key] = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.top-box {
		width: 100%;
		padding: 30rpx;
		// background: #e7f1fa;
	}

	.b-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;
	}

	.b-title-t {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.one-s-box {
		font-size: 22rpx;
		color: #1E72CA;
		margin-top: 20rpx;
		margin-right: 10rpx;

		view {
			width: 32rpx;
			height: 32rpx;
			border-radius: 100rpx;
			margin-right: 10rpx;
			background-color: rgba(30, 114, 202, 0.15);
			color: #1E72CA;
			border: #1E72CA solid 1px;
		}
	}

	.n-box {
		width: 710rpx;
		background: #fff;
		padding: 28rpx 24rpx;
		border-radius: 24rpx;


	}

	.car-num-list {
		.one-car-num {
			width: 52rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.6);
			font-size: 24rpx;
		}

		.car-num-dot {
			background: #C3C3C3;
			width: 20rpx;
			height: 20rpx;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}

		.new-box {
			width: 52rpx;
			height: 52rpx;
			border-radius: 10rpx;
			color: #00E065;
			border: #00E065 solid 1px;
			background-color: rgba(#00E065, 0.1);
			font-size: 24rpx;
		}

		.car-num-input {
			color: #000;
			border: #1E72CA solid 1px;
			background-color: rgba(56, 148, 254, 0.1);
		}
	}

	.scan-box {
		background: rgba(#17698F, 0.1);
		padding: 20rpx 20rpx;
		margin-top: 32rpx;
		border-radius: 24rpx;
		border: #17698F solid 1px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
	}

	.car-num {
		padding: 10rpx 30rpx 30rpx 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;

	}

	.car-info {
		border-top: #F2F2F2 solid 1px;
		padding-top: 32rpx;
		margin-top: 32rpx;
	}

	.info-title {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
	}

	.input-box {
		font-size: 28rpx;
		width: 490rpx;
		padding: 0 20rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		font-size: 28rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 24rpx;
		width: 100%;
		height: 90rpx;
	}
</style>